<template>
    <div>
        <el-card class="box-card" style="height: 850px">
            <div>
                <!--搜索框-->
<!--                <el-card class="box-card">-->
                    <div>
                        <el-form :inline="true" :model="queryData" class="user-search">
                            <el-form-item>
                                <el-input v-model="queryData.articlesTitle" placeholder="输入文章标题"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="queryDataHandle(1,pagePagination.pageSize)">查询</el-button>
                                <el-button @click="resetQuery()">重置</el-button>
                            </el-form-item>
                        </el-form>

                    </div>
<!--                </el-card>-->
                <div class="interspaceH"></div>
                <!--表格-->
                <div>
                    <el-card class="box-card" style="height: 690px">
                        <el-button type="primary" @click="tianjia">+ 新建文章</el-button>

                        <div class="interspaceH"></div>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="articlesTitle" label="文章标题" width=""></el-table-column>
                            <el-table-column prop="articlesDescription" label="文章简介" width=""></el-table-column>
                            <el-table-column prop="articlesUrl" label="文章存放地址" width="">
                            </el-table-column>
                            <el-table-column prop="articlesAppendices" label="附录" width="">
                            </el-table-column>
                            <el-table-column prop="articlesStatus" label="审核状态" width=""></el-table-column>
                            <el-table-column fixed="right" label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="xiangqing(scope.$index, scope.row)">详情</el-button>
                                    <el-button type="text" size="small" @click="bianji(scope.$index, scope.row)">编辑</el-button>
                                    <el-button type="text" size="small" @click="shanchu(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                       @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                       :current-page="pagePagination.currentPage"
                                       :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                       layout="total, sizes, prev, pager, next"
                                       :total="pagePagination.total">
                        </el-pagination>
                    </el-card>
                </div>
            </div>
        </el-card>
        <!--添加页面-->
        <div>
            <el-dialog :title="aaa" :visible.sync="add" width="65%" :close-on-click-modal="false" append-to-body :modal-append-to-body="false">
                <el-form label-width="80px" :model="monomerData" ref="editForm" class="article">
                    <el-form-item label="文章标题">
                        <el-input v-model="monomerData.articlesTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="文章简介">
                        <el-input v-model="monomerData.articlesDescription"></el-input>
                    </el-form-item>
                    <el-form-item label="文章存放地址">
                        <el-input v-model="monomerData.articlesUrl"></el-input>
                        <!-- <el-upload
                                ref="addFileArticle"
                                class="avatar-uploader"
                                :action="$uri + '/api/file/upload'"
                                :show-file-list="false"
                                :data="{type:'2'}"
                                :on-success="addFile"
                                :on-change="addChange"
                                :on-exceed="handleExceed"
                                :limit="1"
                                :auto-upload="false">
                            <img v-if="file" :src="require('@/assets/img/Pdf.png')" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <span>{{ monomerData.articlesAppendices }}</span> -->
                    </el-form-item>

                    <Tinymce v-model="monomerData.articlesAppendices" :height="300" placeholder="在这里输入文字"/>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="close">取消</el-button>
                    <el-button size="mini" type="primary" @click="tijiao">确定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--编辑页面-->
        <div>
            <el-dialog :title="titles" :visible.sync="edit" width="65%" :close-on-click-modal="false">
                <el-form label-width="80px" :model="monomerData" ref="editForm" class="article">
                    <el-form-item label="文章标题">
                        <el-input v-model="monomerData.articlesTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="文章简介">
                        <el-input v-model="monomerData.articlesDescription"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="文章存放地址">
                        <el-upload
                                ref="updateFileArticle"
                                class="avatar-uploader"
                                :action="$uri + '/api/file/upload'"
                                :show-file-list="false"
                                :data="{type:'2'}"
                                :on-success="updateFile"
                                :on-change="updateChange"
                                :on-exceed="handleExceed"
                                :limit="1"
                                :auto-upload="false">
                            <img v-if="monomerData.articlesURL" :src="require('@/assets/img/Pdf.png')" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <span>{{ monomerData.articlesAppendices }}</span>
                    </el-form-item>-->

                    <Tinymce v-model="monomerData.articlesAppendices" :height="300" placeholder="在这里输入文字"/>
                    <el-form-item label="审核">
                        <el-input v-model="monomerData.articlesStatus" disabled></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click="close">取消</el-button>
                    <el-button size="small" type="primary" class="title" @click="update">保存
                    </el-button>
                </div>
            </el-dialog>
        </div>
        <!--详情页面-->
        <div>
            <el-dialog :title="view" :visible.sync="views" width="65%" :close-on-click-modal="false">
                <el-form label-width="80px" :model="monomerData" ref="editForm" disabled>
                    <el-form-item label="文章标题">
                        <el-input v-model="monomerData.articlesTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="文章简介">
                        <el-input v-model="monomerData.articlesDescription"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="文章内容">
                        <el-input type="textarea" :rows="2" v-model="monomerData.articlesAppendices"></el-input>
                    </el-form-item>-->
                    <Tinymce v-model="monomerData.articlesAppendices" :height="300" placeholder="在这里输入文字"/>
                    <el-form-item label="审核">
                        <el-input v-model="monomerData.articlesStatus"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click="close">返回</el-button>
                </div>

            </el-dialog>
        </div>
    </div>
</template>

<script>
    import Tinymce from '@/components/tinymce/index.vue'
    import Pagination from "@/components/Pagination"

    const initData = {
        articlesAppendices: "",
        articlesDescription: "",
        articlesId: "",
        articlesStatus: "",
        articlesTitle: "",
        articlesURL: "",
    }
    export default {
        // 注册组件
        components: {
            Tinymce,
            Pagination
        },
        data() {
            return {
                file: false,//是否已选择文件
                view: '详情',
                aaa: '文章添加',
                add: false,
                views: false,
                //编辑页面
                edit: false,
                titles: '编辑',
                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
                //表格数据
                tableData: [],
                //处理单条数据
                monomerData: {
                    articlesAppendices: "",
                    articlesDescription: "",
                    articlesId: "",
                    articlesStatus: "",
                    articlesTitle: "",
                    articlesURL: "",
                },
                queryData: {
                    articlesTitle: ''
                },
            }
        },
        mounted() {
            this.queryDataHandle(1,10);
        },
        methods: {
            resetQuery() {
                this.queryData = {}
                this.$message({
                    message: '重置成功',
                    type: 'success'
                });
            },
            //关闭窗口
            close() {
                this.add = false;
                this.edit = false;
                this.views = false;
            },
            tianjia() {
                this.monomerData = {...initData};
                if (this.$refs.addFileArticle !== undefined && this.$refs.addFileArticle !== null){
                    this.$refs.addFileArticle.clearFiles()
                }
                this.file=false
                this.add = true
            },
            tijiao() {
                if (this.file){
                    this.$refs.addFileArticle.submit();
                }else{
                    this.addData();
                }
            },
            addData(){
                if (this.monomerData.articlesTitle == null || this.monomerData.articlesTitle == undefined || this.monomerData.articlesTitle == ''){
                    this.$message({
                        message: '请输入文章标题',
                        type: 'error'
                    })
                    return
                }
                this.$request('/article/add', this.monomerData , 'POST').then((data) => {
                    this.$message({
                        message: '文章添加成功',
                        type: 'success'
                    })
                    this.queryDataHandle(this.pagePagination.currentPage,this.pagePagination.pageSize);
                })
                this.close()
            },
            xiangqing(index,row) {
                this.monomerData = {...row}
                this.views = true
            },
            bianji(index,row) {
                if (this.$refs.updateFileArticle !== undefined && this.$refs.updateFileArticle !== null){
                    this.$refs.updateFileArticle.clearFiles()
                }
                this.file = false
                this.monomerData = {...row}
                this.edit = true
            },
            shanchu(index,row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$request('/article/delete/'+row.articlesId, '', 'DELETE').then((data) => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.queryDataHandle(this.pagePagination.currentPage,this.pagePagination.pageSize);
                    })
                }).catch(() => {
                })
            },
            update(){
                if (this.file){
                    this.$refs.updateFileArticle.submit();
                }else{
                    this.submit();
                }
            },
            submit() {
                this.$request('/article/update/',this.monomerData, 'POST').then((data) => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this.queryDataHandle(this.pagePagination.currentPage,this.pagePagination.pageSize);
                })
                this.edit = false
            },
            queryDataHandle(page = 1, row = 10) {
                this.monomerData = {...initData};
                let that = this;
                let payload = {
                    articlesTitle: that.queryData.articlesTitle,
                    pageNum: page,
                    pageSize: row
                }
                that.$request("/article/getAll", payload, "POST").then((data) => {
                    that.tableData = data.data.data
                    that.pagePagination['total'] = data.data.total
                    that.pagePagination['pageSize'] = row
                })
            },
            //文件修改成功时的钩子
            updateFile(res, file){
                this.monomerData.articlesURL = res.fileEntities[0].path;
                this.submit();
            },
            //文件上传成功时的钩子
            addFile(res, file){
                this.monomerData.articlesURL = res.fileEntities[0].path;
                this.addData();
            },
            //文件状态改变时
            addChange(file, fileList){
                if (this.beforeAvatarUpload(file.raw)){
                    this.file = true
                    this.monomerData.articlesAppendices = file.name
                    return
                }
                this.$refs.addFileArticle.clearFiles()
                this.file = false
            },
            //修改文件状态改变时
            updateChange(file, fileList){
                if (this.beforeAvatarUpload(file.raw)){
                    this.file = true
                    this.monomerData.articlesAppendices = file.name
                    return
                }
                this.$refs.updateFileArticle.clearFiles()
                this.file = false
            },
            beforeAvatarUpload(file) {
                const isPDF = file.type === 'application/pdf';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isPDF) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isPDF && isLt2M;
            },
            handleExceed(file, fileList){
                this.$message.error('只能上传一个文件！');
            },
        }

    }
</script>

<style>
    .tox {
        z-index: 9999999999999 !important;
    }
    .article .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .article .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .article .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .article .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>
